
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>收藏信息</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/font-awesome.css" rel="stylesheet"/>
    <link href="../css/basic.css" rel="stylesheet"/>
    <link href="../css/custom.css" rel="stylesheet"/>
    <link href="../css/element/index.css" rel="stylesheet"/>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">舒乐美食</a>
        </div>

        <div class="header-right">
            <a href="javascript:void(0)" class="btn btn-info" @click="logout" title="退出登录">
                <i class="fa fa-sign-out fa-2x"></i>
            </a>
        </div>

        <div class="header-right">
            <a href="javascript:void(0)" class="btn btn-info" title="跳转到个人信息" @click="personalPage">
                <i class="fa fa-user fa-2x"></i>
            </a>
        </div>

        <div class="header-right" style="padding-top: 25px">欢迎你，{{ user.name }}</div>

        <div class="header-left">
            <a href="/front/index.html" class="btn btn-info" title="跳转到首页">
                <i class="fa fa-dot-circle-o fa-2x"></i>
            </a>
        </div>
    </nav>
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="index.html"><i class="fa fa-dashboard"></i>系统首页</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-yelp "></i>信息展示 <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse in">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>用户信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="classifyInfo.html"><i class="fa fa-table"></i>菜谱大类信息</a>
						</li>
						<li v-if="authority.indexOf(4) != -1">
							<a href="subClassifyInfo.html"><i class="fa fa-table"></i>菜谱小类信息</a>
						</li>
						<li v-if="authority.indexOf(5) != -1">
							<a href="foodsMenuInfo.html"><i class="fa fa-table"></i>菜谱信息</a>
						</li>
						<li v-if="authority.indexOf(6) != -1">
							<a href="foodsMaterialInfo.html"><i class="fa fa-table"></i>食材信息</a>
						</li>
						<li v-if="authority.indexOf(7) != -1">
							<a href="collectInfo.html" class="active-menu"><i class="fa fa-table"></i>收藏信息</a>
						</li>
						<li v-if="authority.indexOf(8) != -1">
							<a href="praiseInfo.html"><i class="fa fa-table"></i>笔记点赞信息</a>
						</li>
						<li v-if="authority.indexOf(9) != -1">
							<a href="notesInfo.html"><i class="fa fa-table"></i>笔记信息</a>
						</li>
						<li v-if="authority.indexOf(10) != -1">
							<a href="newsInfo.html"><i class="fa fa-table"></i>饮食资讯信息</a>
						</li>
						<li v-if="authority.indexOf(1000001) != -1">
							<a href="advertiserInfo.html"><i class="fa fa-table"></i>公告信息</a>
						</li>
						<li v-if="authority.indexOf(1000002) != -1">
							<a href="messageInfo.html"><i class="fa fa-table"></i>趣味答题信息</a>
						</li>

                        <li>
                            <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                        </li>
                    </ul>
                </li>
				<li>
					<a href="notesInfoComment.html"><i class="fa fa-file"></i>笔记信息评论</a>
				</li>

                <li>
                    <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                </li>
                <li>
                    <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-subhead-line">这是收藏信息页，管理员可以对收藏信息进行操作。 </h1>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            收藏信息表
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <div class="nx-table-header">
                                    <button class="btn btn-sm btn-primary" v-on:click="add()">新增</button>
                                    <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                    <i class="glyphicon glyphicon-search"></i>
                                </div>
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
										<th>名称</th>
										<th>时间</th>
										<th>名称</th>

                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody v-for="obj in objs">
                                    <tr>
                                        <td>{{obj.id}}</td>
										<td>{{obj.name}}</td>
										<td>{{obj.time}}</td>
										<td>{{obj.foodsName}}</td>

                                        <td>
                                            <button class="btn btn-primary btn-xs" v-on:click="init(obj)">编辑</button>
                                            <button class="btn btn-danger btn-xs" v-on:click="del(obj.id)">删除</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                        <li class="page-item" v-bind:class="{ disabled: preActive }">
                                            <a class="page-link" href="javascript:void(0)"
                                               v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" v-on:click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                        </li>
                                        <li class="page-item" v-bind:class="{ disabled: nextActive }">
                                            <a class="page-link" href="javascript:void(0)" v-on:click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal" tabindex="-1" role="dialog" id="mod">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="entity={sex:'男'}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="id" name="id" v-model="entity.id">
						<div class="form-group">
							<label class="col-sm-3 control-label">名称</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" v-model="entity.name" placeholder="请输入名称" id="name">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">时间</label>
							<div class="col-sm-7">
								<div class="block">
									<el-date-picker v-model="entity.time" id="time" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
								</div>
							</div>
						</div>
						<div class="form-group" >
							<label class="col-sm-3 control-label">关联菜谱</label>
							<div class="col-sm-7">
								<select class="form-control" v-model="entity.foodsId">
									<option v-for="item in foodsObjs" :value="item.id" name="foodsId">{{item.name}}</option>
								</select>
							</div>
						</div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="entity={sex:'男'}">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="update()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.metisMenu.js"></script>
<script src="../js/custom.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/element/index.js"></script>

<script>
    function msg(type, msg) {
        Vue.prototype.$message({
            type: type, // success（成功）、warning（警告）, error(错误)
            message: msg,
            duration: 2000,
            offset: 100,
            center: true
        })
    }

    new Vue({
        el: '#wrapper',
        data: {
			foodsObjs: [],

            authority: [],
            permission: [],
            storeUser: JSON.parse(localStorage.getItem("user")),
            name: '',
            user: {},

            objs: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
            entity: {
                sex: '男'
            }
        },
        created: function () {

            this.loadTable(1);

            this.user = JSON.parse(localStorage.getItem('user'));

            axios.get("/permission/7").then(res => {
                if (res.data.code === '0') {
                    this.permission = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

			this.entity.foodsId = 0;
			axios.get("/foodsMenuInfo").then(res => {
				if (res.data.code === '0') {
					this.foodsObjs = res.data.data;
				} else {
					msg('error', res.data.msg);
				}
			});

        },
        methods: {

            loadTable(pageNum) {
                let name = this.name === '' ? "all" : this.name;
                axios.get("/collectInfo/page/" + name + "?pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.objs = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        msg('error', res.data.msg);
                    }
                });
            },
            init(o) {
                if (this.permission.indexOf(3) === -1) {
                    msg('warning', '你没有权限操作');
                    return;
                }
                this.entity = JSON.parse(JSON.stringify(o));
                $('#mod').modal('show');
            },
            add() {
                if (this.permission.indexOf(1) === -1) {
                    msg('warning', '你没有权限操作');
                    return;
                }
                this.entity = {sex:'男'};
                $('#mod').modal('show');
            },
            update() {
                if (checkValid(this.entity)) {
                    if (!this.entity.id) {
                        axios.post(
                            "/collectInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '添加成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    } else {
                        axios.put(
                            "/collectInfo", this.entity
                        ).then(res => {
                            if (res.data.code === '0') {
                                msg('success', '更新成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error', res.data.msg);
                            }
                        })
                    }
                }
            },
            del(id) {
                if (this.permission.indexOf(2) === -1) {
                    msg('warning', '你没有权限操作');
                    return;
                }
                let _this = this;
                this.$confirm('确认删除？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'btn-custom-cancel',
                    type: 'warning'
                }).then(function(){
                    axios.delete("/collectInfo/" + id).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '删除成功');
                            _this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    });
                }).catch(function() {
                    console.log("取消成功！");
                });
            },
            downModel() {
                location.href = '/collectInfo/getExcelModel';
            },
            clickUpload: function (e) {
                if (this.permission.indexOf(1) === -1) {
                    msg('warning', '你没有权限操作');
                    e.preventDefault();
                }
            },
            upload: function () {
                let files = this.$refs.file.files;
                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append('file', files[i]);
                    axios.post('/collectInfo/upload', formData, {
                        'Content-Type': 'multipart/form-data'
                    }).then(res => {
                        if (res.data.code === '0') {
                            msg('success', '批量导入成功');
                            this.loadTable(1);
                        } else {
                            msg('error', res.data.msg);
                        }
                    })
                }
            },
            logout() {
                logout();
            }
        }
    })
</script>
</body>
</html>
